<template>
  <el-card>
    <template #header>
      <h3 v-text="t('System Status')"></h3>
    </template>
    
    <div class="status-container">
      <el-row v-for="(item, index) in statusItems" :key="index" style="margin-bottom: 0;">
        <el-col :span="8">
          <span>{{ t(item.label) }}</span>
        </el-col>
        <el-col :span="16">
          <span>{{ getStatusValue(item.key) }}</span>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup>
import { useLanguageStore } from '@/stores/language'
import { useSystemStatusStore } from '@/stores/systemStatus'

const languageStore = useLanguageStore()
const systemStatusStore = useSystemStatusStore()

// 状态项配置
const statusItems = [
  { label: 'App Status', key: 'appStatus' },
  { label: 'Internet Time', key: 'internetTime' },
  { label: 'Host Time', key: 'hostTime' },
  { label: 'GNSS Time', key: 'gnssTime' },
  { label: 'Device', key: 'deviceStatus' },
  { label: 'Storage', key: 'storageStatus' },
  { label: 'Memory', key: 'memoryStatus' },
  { label: 'GPU Memory', key: 'gpuMemoryStatus' },
  { label: 'CPU', key: 'cpuStatus' },
  { label: 'Record Queue', key: 'recordQueueStatus' },
  { label: 'Video Process Queue', key: 'videoProcessQueueStatus' },
  { label: 'Replay Neck', key: 'replayNeckStatus' },
  { label: 'Base Thread', key: 'baseThreadStatus' },
  { label: 'Main Thread', key: 'mainThreadStatus' },
  { label: 'Process Thread', key: 'processThreadStatus' },
  { label: 'File Thread', key: 'fileThreadStatus' },
  { label: 'Bus Flow', key: 'busFlowStatus' },
  { label: 'Video Flow', key: 'videoFlowStatus' },
  { label: 'Start Stop', key: 'startStopStatus' },
  { label: 'Internet', key: 'internetStatus' }
]

// 翻译函数
const t = (key) => {
  const translations = {
    'System Status': {
      'en': 'System status',
      'zh': '系统状态'
    },
    'App Status': {
      'en': 'App Status',
      'zh': '应用状态'
    },
    'Internet Time': {
      'en': 'Internet Time',
      'zh': '网络时间'
    },
    'Host Time': {
      'en': 'Host Time',
      'zh': '主机时间'
    },
    'GNSS Time': {
      'en': 'GNSS Time',
      'zh': '卫星时间'
    },
    'Device': {
      'en': 'Device',
      'zh': '设备'
    },
    'Storage': {
      'en': 'Storage',
      'zh': '存储'
    },
    'Memory': {
      'en': 'Memory',
      'zh': '内存'
    },
    'GPU Memory': {
      'en': 'GPU Memory',
      'zh': '显存'
    },
    'CPU': {
      'en': 'CPU',
      'zh': 'CPU'
    },
    'Record Queue': {
      'en': 'Record Queue',
      'zh': '采集缓存'
    },
    'Video Process Queue': {
      'en': 'Video Process Queue',
      'zh': '视频队列'
    },
    'Replay Neck': {
      'en': 'Replay Neck',
      'zh': '回放瓶颈'
    },
    'Base Thread': {
      'en': 'Base Thread',
      'zh': '基础线程'
    },
    'Main Thread': {
      'en': 'Main Thread',
      'zh': '主线程'
    },
    'Process Thread': {
      'en': 'Process Thread',
      'zh': '处理线程'
    },
    'File Thread': {
      'en': 'File Thread',
      'zh': '文件线程'
    },
    'Bus Flow': {
      'en': 'Bus Flow',
      'zh': '总线流量'
    },
    'Video Flow': {
      'en': 'Video Flow',
      'zh': '视频流量'
    },
    'Start Stop': {
      'en': 'Start Stop',
      'zh': '开始停止'
    },
    'Internet': {
      'en': 'Internet',
      'zh': '主机网络'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

function getStatusValue(key) {
  const value = systemStatusStore[key]
  return value === '---' ? '---' : (value || '---')
}
</script> 